<template>
  <div id="nav">
    <div class="head_nav_log">
      <!-- <a @click.prevent="toSet('财务')"
                v-show="leftopen == true">
                <img v-if="headObj != null && headObj != undefined && headObj != ''"
                    :src="$fnc.getImgUrl(headObj)"
                    alt />
                <p style="color:#404a54;font-weight:bold;font-size:18px"
                    v-else>{{this.$store.state.adminTitle || ''}}</p>
            </a> -->
      <img src="./../assets/img/index/adminpro.png" :style="{ 'margin-left': leftopen == true ? '10px' : '-8px' }" alt="" />
      <span>Admin Pro</span>
    </div>

    <div class="navulbox">
      <div class="nav_title" v-show="leftopen == true">
        {{ $store.state.parentTitle || (list != "" ? list[0].title : "") }}
      </div>
      <ul class="nav_list" v-for="(li, i) in list" :key="i" v-show="li.title == ($store.state.parentTitle || list[0].title)">
        <li v-for="(item, index) in li.z" v-show="li.z" :key="index" :class="[
            item.title ==
              ($store.state.title || (item.z != null && item.z[0].title)) &&
            item.z != null
              ? 'hideItem nav_list_active '
              : '',
            item.title ==
              ($store.state.title || (item.z == null && li.z[0].title)) &&
            item.z == null
              ? 'nav_list_active1'
              : ''
          ]">
          <a @click.prevent="leftStore(item, i)" class="nav_list_item" :class="[item.z == null ? '' : 'nav_list_itemadd']">
            <span class="pcoded-micon">
              <i :class="item.piclink"></i>
            </span>
            <span class="pcoded-mtext">{{ item.title }}</span>
          </a>

          <ul class="item_list" :style="{ 'margin-left': leftopen == true ? '52px' : '0px' }" v-if="item.z"
              :class="{ show: item.title == $store.state.title }">
            <li v-for="(itemList, index) in item.z" :key="index">
              <i v-show="leftopen == false" @click="leftSan(itemList)" class="fa" :style="{
                  color: itemList.title == $store.state.title2 ? '#328ff0' : ''
                }" :class="[
                  itemList.title == $store.state.title2
                    ? 'fa-caret-down'
                    : 'fa-caret-right'
                ]" aria-hidden="true"></i>

              <a @click="leftSan(itemList)" v-show="leftopen == true" :class="[
                  itemList.title == $store.state.title2 ? 'left_active' : ''
                ]">{{ itemList.title }}</a>
            </li>
          </ul>
        </li>
        <li v-if="!li.z">栏目为空</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data () {
    return {
      list: this.$store.state.menuList,
      leftTitle: "",
      navHeeight: ""
    };
  },
  methods: {
    leftStore (item, i) {
      this.$store.commit("setId", item.parent_id);
      this.$store.commit("setTitle", item.title);
      this.$store.commit("setParentTtile", item.parent_title);
      this.$store.commit("setbreadcrumbs", []);
      sessionStorage.setItem("title", item.title);
      sessionStorage.setItem("parentTitle", item.parent_title);
      var url;
      if (item.z) {
        this.$store.commit("setTitle2", item.z[0].title);
        this.$store.commit("showTitle2", true);
        url = item.z[0].url;
      } else {
        url = item.url;
        this.$router.push(item.url);
        this.$store.commit("showTitle2", false);
      }
      if (url == this.$route.path) {
        this.$router.push({
          path: "/redirect",
          query: url
        });
      } else {
        this.$router.push({
          path: url
        });
      }
    },
    leftSan (it) {
      this.$router.push(it.url);
      this.$store.commit("setTitle2", it.title);
      this.$store.commit("showTitle2", true);
      // sessionStorage.setItem('title',this.$store.state.title)
      // sessionStorage.setItem('parentTitle',this.$store.state.parentTitle)
    }
  },
  computed: {
    getMenuList () {
      return this.$store.state.menuList;
    },
    ...mapState({
      headObj: state => state.headTitleInfo,
      leftopen: state => state.leftopen || false
    })
  },
  watch: {
    getMenuList (obj) {
      this.list = obj;
      this.leftTitle = obj[0].title;
    }
  }
};
</script>
<style lang="less" scoped>
.hideItem {
  max-height: 500px !important;
}
.show {
  display: block !important;
}
/* nav */
#nav {
  min-width: 200px;
  background: #fff;
  // box-shadow: 15px 0px 15px -10px #000;
  position: relative;
  z-index: 2;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #eeeeee;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}

.nav_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  font-weight: bold;
  text-align: left;
}
.nav_list > li {
  // border-bottom: 1px solid #f4f4f4;
  overflow: hidden;
  transition: all 0.5s linear;
  max-height: 50px;
}
.nav > ul:first-child > li:first-child {
  border-top: 1px solid #f4f4f4;
}
.nav_list_item {
  display: block;
  width: 100%;
  padding: 5px 10px;
  // color: #6c7384;
  color: #8c8c8c;
  height: 50px;
  text-align: left;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nav_list_item > span.pcoded-micon {
  font-size: 18px;
  padding: 7px;
  margin-right: 10px;
  // color: #6c7384;
  color: #8c8c8c;
  border-radius: 4px;
  width: 30px;
  display: inline-block;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pcoded-mtext {
  font-size: 14px;
  opacity: 1;
  visibility: visible;
  // position: absolute;
  top: 11px;
}
.spanWeizhi {
  position: absolute !important;
  top: 11px;
  right: 35px;
}
.layui-bg-pink {
  background: #ff7b91 !important;
}

.nav_list_itemadd:after {
  content: "\e61a";
  float: right;
  font-style: normal;
  margin-left: 3px;
  font-size: 10px;
  position: absolute;
  right: 15px;
  top: 8px;
  font-family: "themify";
  padding-top: 12px;
  transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
}
.nav_list_active .nav_list_itemadd:before {
  border-left-color: #38a9f9;
  border-left-style: solid;
  border-left-width: 5px;
  content: " ";
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;
}
.nav_list_active > a {
  font-weight: bold !important;
  color: #328ff0 !important;
  background: #f0faff !important;
}
.nav_list_active1 > a {
  font-weight: bold !important;
  color: #328ff0 !important;
  background: #f0faff !important;
}
.nav_list_active1 > .nav_list_item > span.pcoded-micon {
  color: #328ff0 !important;
  font-weight: bold !important;
}
.nav_list_active > a:after {
  content: "\e622" !important;
  float: right;
  font-style: normal;
  margin-left: 3px;
  font-size: 10px;
  position: absolute;
  right: 15px;
  top: 8px !important;
  font-family: "themify";
  padding-top: 12px;
  transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
}

.nav_list_active > a > span:not(.spanWeizhi) {
  font-weight: bold;
  color: #328ff0;
}
.nav_list_item:hover {
  background: #efefef;
}
.nav_list_item:hover span:not(.spanWeizhi) {
  font-weight: bold;
}
.nav_active:hover > a:before {
  border-left-color: #38a9f9;
  border-left-style: solid;
  border-left-width: 5px;
  content: " ";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}
.nav_list_active1 > a:before {
  border-left-color: #38a9f9;
  border-left-style: solid;
  border-left-width: 5px;
  content: " ";
  height: 100%;
  // left: 0;
  right: 0;
  position: absolute;
  top: 0;
}

.nav_list_active_search > a {
  background: #f2f2f2 !important;
}
.nav_list_active_search > a:after {
  content: "\e622" !important;
}

.nav_list_active_search > a > span:not(.spanWeizhi) {
  font-weight: bold;
  color: red;
}

.nav_list_active_search > a:before {
  border-left-color: #38a9f9;
  border-left-style: solid;
  border-left-width: 5px;
  content: " ";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.item_list {
  border-left: 1px solid #ddd;
  text-align: left;
  margin-top: 15px;
  margin-bottom: 15px;
  background: #fff;
  display: none;
  > li {
    padding-left: 20px;
    height: 20px;
    margin-top: 15px;
    position: relative;
    cursor: pointer;
    > a {
      font-size: 13px;
      color: #787878;
    }
  }
  > li:first-child {
    margin-top: 0;
  }
}
.left_active::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #38a9f9;
}
.sanji_a {
  display: block;
}

.head_nav_log {
  width: 200px;
  height: 60px;
  padding-left: 15px;
  // background-color: #1e43ac;
  // border-bottom: 1px solid #eee;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > img {
    margin-right: 10px;
  }
  > span {
    font-size: 22px;
    color: #5c646c;
  }
  > a {
    display: block;
    height: 100%;
    line-height: 60px;
    margin-right: 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.head_nav_log img {
  vertical-align: middle;
  max-width: 70%;
}

.navulbox {
  width: 100%;
  flex: 1;
  overflow: auto;
  // -moz-box-shadow: 0px 6px 20px #c2c2c2;
  // -webkit-box-shadow: 0px 6px 20px #c2c2c2;
  // box-shadow: 0px 6px 20px #c2c2c2;
}
</style>
